<template>
  <div id="content" class="content" v-html="wiringDom" />
</template>

<script>
import { mapGetters } from 'vuex'
import * as d3 from 'd3'
import { getStationWiringData } from '@/api/stationMonitor'
export default {
  data() {
    return {
      wiringDom: '',
      ycIds: [],
      yxIds: [],
      svgtiemr: null
    }
  },
  computed: {
    ...mapGetters([
      'stationId',
      'wiring'
    ])
  },
  watch: {
    stationId() {
      this.getWiring()
    }
  },
  mounted() {
    this.stationId && this.getWiring()
  },
  beforeDestroy() {
    // 清除定时器
    clearTimeout(this.svgtiemr)
  },
  methods: {
    getWiring() {
      fetch(this.wiring).then(res => res.text()).then(data => {
        this.wiringDom = data
        this.$nextTick(() => {
          this.initSvg()
          this.move()
        })
      })
    },
    initSvg() {
      const svg = document.querySelector('#content svg g').children
      svg.forEach(item => {
        // console.log(item)
        const el1 = item.getAttribute('data-id')
        // const id = item.getAttribute('id')
        if (el1) {
        //   const img1 = item.getAttribute('data-img-1')
        //   const img2 = item.getAttribute('data-img-2')
          const pointIndex = el1.slice(3)
          const type = el1.slice(0, 2)
          if (type === 'yc' && pointIndex !== '') {
            this.ycIds.push(pointIndex)
          }
          if (type === 'yx' && pointIndex !== '') {
            this.yxIds.push(pointIndex)
          }
        }
      })
      this.getStationWiringData()
    },
    getStationWiringData() {
      if (this.svgtiemr) {
        clearTimeout(this.svgtiemr)
      }
      const option = {
        stationId: this.stationId,
        ycIds: this.ycIds.join(','),
        yxIds: this.yxIds.join(',')
      }
      getStationWiringData(option).then(res => {
        const { data } = res
        // console.log(data)
        if (data.yc) {
          const key = Object.keys(data.yc)
          const arr = []
          for (const i in data.yc) {
            arr.push(data.yc[i])
          }
          key.forEach((item, index) => {
            arr.forEach((arrItem, arrindex) => {
              if (index === arrindex) {
                document.querySelector(`text[data-id='yc_${item}']`).innerHTML = arrItem
              }
            })
          })
        }
        if (data.yx.length !== 0) {
          let key = []; const arr = []
          let el, img1, img2
          for (const i in data.yx) {
            arr.push(data.yx[i])
          }
          key = Object.keys(data.yx)
          key.forEach((item, index) => {
            arr.forEach((arrItem, arrIndex) => {
              if (index === arrIndex) {
                el = document.querySelector(`image[data-id='yx_${item}']`)
                img1 = el.getAttribute('data-img-1')
                img2 = el.getAttribute('data-img-2')
                if (arrItem === 1) {
                  el.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', img1)
                } else if (arrItem === 2) {
                  el.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', img2)
                }
              }
            })
          })
        }
      })
      this.svgtiemr = setTimeout(() => {
        this.getStationWiringData()
      }, 5000)
    },
    move() {
      // 动态设置svg宽高
      //   const dom = document.querySelector('#content svg')
      //   dom.setAttribute('height', '100%')
      //   dom.setAttribute('width', '100%')

      const svg = d3.select('#content svg')
      svg._groups[0][0].setAttribute('height', '100%')
      svg._groups[0][0].setAttribute('width', '100%')
      svg.call(
        d3.zoom().scaleExtent([0.1, 5]).on('zoom', zoom)
      )
      function zoom() {
        d3.select(this).select('g').attr('transform', d3.zoomTransform(svg.node()))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
    border: 1px solid #000;
    height: calc(100vh - 145px);
}
</style>
